<template>
  <div class="lix-cou__container" v-if="classInfo">
    <div class="lix-cou__header">
      <div class="lix-cou__show">
        <img :src="classInfo.thumb" alt="" />
        <div class="info">
          <p class="title">{{ classInfo.name }}</p>
          <p class="price"><span>￥</span>{{ classInfo.price }}</p>
        </div>
      </div>
      <div class="lix-cou__teacher">
        <img class="avatar" :src="teacherInfo.avatar" @click="go2TeacherPage"/>
        <div class="right-view">
          <div class="right-top">
            <div class="teacher-wrap" @click="go2TeacherPage">
                <div>主讲老师：{{ teacherInfo.name }}</div>
                <img  v-if="teacherInfo.gender === 1" src="../../assets/man.png"/>
                <img  v-else src="../../assets/women.png" alt="" />
            </div>
            <!-- <div class="follow" v-if="!isFollowed">
              <button @click="follow">+ 关注</button>
            </div> -->
            <!-- <div class="follow is-followed" v-else>
              <button @click="follow">已关注</button>
            </div> -->
          </div>
          <div class="desc">{{ teacherInfo.description }}</div>
          <van-rate class="rate" v-model="teacherInfo.grade" :size="13" disabled disabled-color="#ff6c60"/>
        </div>
      </div>
    </div>
    <div class="lix-cou__content">
      <div class="class-desc">
        <div class="desc-header">
          <div class="seperate"></div>
          <div>课程简介</div>
        </div>
        <div class="desc-content">
          <p>开课时间：{{ classInfo.begintime }}</p>
          <p>课程人数: {{ classInfo.limit }}</p>
          <p>课程时长: {{ classInfo.duration }}</p>
          <p>主要面向群体年龄：{{ classInfo.age_range }}</p>
          <p>开课地点：{{ classInfo.place }}</p>
        </div>
      </div>
      <div class="class-detail">
        <div class="detail-header">
          <div class="seperate"></div>
          <div>课程详情</div>
        </div>
        <div class="detail-content" v-html="rawHtml"></div>
        <div class="fixed-view"></div>
      </div>
    </div>
    <!-- <div class="lix-cou__fixed">
      <div class="fixed-container">
        <a :href="tel" class="first-btn">
          <img src="../../assets/call.png" alt="" />
          <a>客服</a>
        </a>
        <button class="second-btn" @click="showPaymentControl" v-if="btnText === '在线报名'">{{ btnText }}</button>
        <button class="second-btn disabled" v-else>{{ btnText }}</button>
      </div>
    </div> -->
  </div>
</template>

<script>
import Vue from 'vue'
import { Rate } from 'vant'
Vue.use(Rate)
const assetBaseUrl = 'http://huashi.img.emhome.cn/'
const shareIconUrl = 'assets/icons/share.png'
export default {
  name: 'course',
  data () {
    return {
      classInfo: null,
      teacherInfo: null,
      shareInfo: null,
      isFollowed: true,
      tel: '',
      rawHtml: '',
      isPay: false,
      btnText: '在线报名'
    }
  },
  mounted () {
    window.share = this.share
  },
  created () {
    this.listenPay()
    this.getClassInfo()
    this.jsBridge.configRightBar({
      btn: {
        'img': assetBaseUrl + shareIconUrl,
        'title': '分享'
      },
      callback: 'window.share();'
    }, () => {
      console.log('调用成功')
    })
  },
  methods: {
    listenPay () {
      console.log('监听支付')
      this.jsBridge.finishPay({}, () => {
        console.log('支付完成!!!!!')
        this.getClassInfo()
      })
    },
    share () {
      console.log('触发了分享按钮')
      this.jsBridge.share({
        title: this.shareInfo.title,
        img: this.shareInfo.img_url,
        content: this.shareInfo.desc,
        link: this.shareInfo.link
      }, () => {
        console.log('分享回调成功')
      })
    },
    getClassInfo () {
      const code = this.$route.params.code
      // const classId = 1
      this.axios
        .get('/share', {
          headers: { FaseMode: true, AuthShare: code }
        })
        .then(res => {
          this.classInfo = res.data
          this.teacherInfo = res.data.teacher
          this.shareInfo = res.data.share
          this.isFollowed = res.data.teacher.followed
          this.tel = 'tel:' + res.data.service_telephone
          this.rawHtml = res.data.body
          if (res.data.order !== null && res.data.order.ispay === true) {
            // this.isPay = true
            this.btnText = '已报名'
          } else {
            if (!res.data.can_enroll) {
              this.btnText = '报名已截止'
            } else {
              this.btnText = '在线报名'
            }
          }
          console.log(res)
        })
        .catch(e => {
          console.log(e)
        })
    },
    follow () {
      // const schoolId = this.$route.params.id
      const teacherId = this.teacherInfo.id
      this.axios
        .post('/follow/attention', {
          model: 'teacher',
          model_id: teacherId
        })
        .then(res => {
          this.isFollowed = res.data
          console.log(res)
        })
        .catch(e => {
          console.log(e)
        })
    },
    showPaymentControl () {
      console.log('调用原生支付弹框')
      this.jsBridge.showPaymentControl({
        id: this.classInfo.id,
        name: this.classInfo.name,
        price: this.classInfo.price
      }, () => {
        console.log('调用原生支付弹框')
      })
    },
    go2TeacherPage () {
      this.jsBridge.goToTeacherPage({
        id: this.teacherInfo.id
      }, () => {})
    }
  }
}
</script>

<style lang="less">
p {
  margin: 0;
}
.lix-cou__container {
  background-color: #fff;
  min-height: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  & .lix-cou__header {
    width: 100%;
    & .lix-cou__show {
      display: flex;
      flex-direction: row;
      padding: 10px;
      background-color: #f3f3f3;
      & img {
        width: 171px;
        height: 101px;
      }
      & .info {
        & .title {
          font-size: 16px;
          color: #292929;
          font-weight: 900;
          max-width: 170px;
          margin-left: 10px;
        }

        & .price {
          margin-top: 40px;
          margin-left: 10px;
          font-size: 14px;
          color: #ff0036;
          & span {
            font-size: 10px;
          }
        }
      }
    }

    & .lix-cou__teacher {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 17px 11px 14px 9px;
      border-bottom: 1px solid #f3f3f3;
      & .avatar {
        display: block;
        width: 60px;
        height: 60px;
        border: 6px solid #eff3f9;
        border-radius: 50%;
        border-radius: 60px;
      }

      & .right-view {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 10px;

        & .right-top {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          & .teacher-wrap {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #5a5a5a;
            & img {
              height: 14px;
              width: 14px;
              border-radius: 3px;
              margin-left: 5px;
            }
          }

          & button {
            height: 18px;
            min-width: 53px;
            line-height: 18px;
            font-size: 11px;
            color: #ff9891;
            border: 1px solid #ff9891;
            border-radius: 9px;
            background-color: #fff;
          }
          & .follow {
            & button {
              height: 18px;
              min-width: 53px;
              line-height: 18px;
              font-size: 11px;
              color: #ff9891;
              border: 1px solid #ff9891;
              border-radius: 9px;
              background-color: #fff;
            }
          }
          & .is-followed {
            & button {
              color: #d3d3d3;
              border: 1px solid #d3d3d3;
            }
          }
        }

        & .desc {
          margin: 7px 0;
          font-size: 13px;
          color: #999999;
        }
      }
    }
  }
  .lix-cou__content {
    width: 100%;
    padding: 16px 13px 10px 10px;

    & .class-desc {
      font-size: 15px;
      color: #404040;
      font-weight: 900;
      & .desc-header {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      & .desc-content {
        margin-top: 18px;
        font-size: 13px;
        color: #606060;
        font-weight: 400;
      }
    }

    .seperate {
      width: 4px;
      height: 15px;
      margin-right: 10px;
      background-color: #ff0036;
    }

    & .class-detail {
      margin-top: 22px;
      font-size: 15px;
      color: #404040;
      font-weight: 900;
      & .detail-header {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      & .detail-content {
        margin-top: 18px;
        font-weight: 400;
      }

      & .fixed-view {
        height: 45px;
        width: 100%;
      }
    }
  }

  .lix-cou__fixed {
    width: 100%;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    height: 45px;

    & .fixed-container {
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      .first-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin-right: 1px;
        width: 68px;
        & img {
          width: 25px;
          height: 25px;
        }
        font-size: 13px;
        color: #fff;
        background-color: #f8b551;
        border: none;
        & a {
          color: #fff;
        }
      }
      & .second-btn {
        height: 100%;
        flex: 1;
        font-size: 19px;
        color: #fff;
        background-color: #fd774d;
        border: none;
      }

      & .disabled {
        background-color: #C0C0C0;
      }
    }
  }
}
</style>
